<template>
  <div class="lcd-index">
    <div class="lcd-iir-header">
      低代码在线设计平台<span>(low code design by online)</span>
    </div>
    <div class="lcd-iir-gitee">
      <a href='https://gitee.com/iteaj/online'><img src='https://gitee.com/iteaj/online/widgets/widget_3.svg' alt='Fork me on Gitee' /></a>
    </div>
    <a-row :gutter="16" justify="center" class="lcd-iir-row">
      <a-col :span="8" style="max-width: 380px; margin-right: 26px">
        <a-card :hoverable="true" @click.native="clickHandle(1)">
          <template #title><div style="text-align: center">通过数据库数据结构</div></template>
          <p>1. 生成方式：通过数据库接口生成代码</p>
          <p>2. 生成语言：java、vue、xml</p>
          <p>3. 功能说明：通过将设计好的数据库的数据进行解析后生成vue增删改查模板、java各层模板、mybatis配置等</p>
        </a-card>
      </a-col>
      <a-col :span="8" style="max-width: 380px; margin-left: 26px">
        <a-card :hoverable="true" @click.native="clickHandle(2)">
          <template #title><div style="text-align: center">通过前端设计规则</div></template>
          <p>1. 生成方式：通过前端设计规则生成代码</p>
          <p>2. 生成语言：sql、vue、java、xml</p>
          <p>3. 功能说明：通过设计好的数据直接生成数据库表、vue增删改查模板、java各层模板、mybatis配置等</p>
        </a-card>
      </a-col>
    </a-row>
    <div style="text-align: center; margin-top: 13px">
      <p style="font-size: 18px; color: #525252">强大的页面设计,包括编辑框、搜索栏、表格列表、详情页、设计完之后的功能预览、源代码预览</p>
      <p style="font-size: 16px; color: #686868">前后端代码生成,支持基于SpringBoot和mybatis-plus的后台代码以及基于vue(ivzone)的前端代码</p>
      <p style="font-size: 14px; color: #787878">mysql表的设计和生成,通过表单设计之后就可以显示生成的sql语句</p>
      <p style="font-size: 12px; color: #888888">简单的原型设计,设计完成后的页面可以直接预览作为原型</p>
    </div>
    <div class="lcd-iir-desc">
      一款适用于前后端、个人、自由开发者使用的所见即所得的在线功能设计平台
    </div>
  </div>
</template>

<script>
import {useStore} from "vuex";

export default {
  name: "index",
  setup() {
    let store = useStore();
    if(!store) {
      throw new Error("IvzOnline必须依赖和使用vuex作为数据存储");
    }

    if(!store.hasModule("IvzOnlineStore")) {
      console.log(this)
    }
  },
  methods: {
    clickHandle(type) {
      if(type == 1) {
        this.$router.push("/lcd/database")
      } else {
        this.$router.push("/lcd")
      }
    }
  }
}
</script>

<style scoped>
.lcd-index {
  width: 100%;
  height: 100%;
  position: relative;
}
.lcd-index .ant-card {
  border-radius: 5px;
}
.lcd-iir-row {
  width: 100%;
  /*position: absolute;*/
  margin-top: 28px;
}
.lcd-iir-gitee {
  width: 80px;
  height: 80px;
  top: 68px;
  right: 168px;
  position: absolute;
}
.lcd-iir-header {
  color: #ff6600;
  font-size: 32px;
  padding-top: 64px;
  text-align: center;
}
.lcd-iir-header span {
  width: 100%;
  font-size: 25px;
  display: inline-block;
}
.lcd-iir-desc {
  width: 100%;
  color: #1296ff;
  bottom: 12px;
  font-size: 12px;
  position: absolute;
  text-align: center;
}
</style>
